<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图文宝</title>
</head>
<style>
    *{
        padding: 0;
        margin:0;
    }
    button{
        border: 1px solid transparent;
        outline: none;
    }
    input{
        outline: none;
        -webkit-appearance: none;
        border-radius: 0;
        border:none;
    }
    input:-webkit-autofill{
        -webkit-box-shadow: 0 0 0px 1000px white inset;
    }
    .main .box{
        width: 100%;
        height: 942px;
        background:url('/statics/img/bg-1_01.png') no-repeat;
        background-size:cover;
        /* background-attachment: fixed;   */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .main .box .data-box{
        width: 600px;
        height: 460px;
        background:#fff;
        z-index: 1;
    }
    .main .box .zs{
        width: 600px;
        height: 460px;
        background:#4768b2;
        position: absolute;
        z-index: 0;
        transform: translate(34px,34px);
    }
    .flex{
        display: flex;
        align-items: center;
        width: 410px;
        height: 40px;
        margin-top:30px;
    }
    .data-box .title{
        font-size: 32px;
        font-weight: bold;
        color: #333333;
        padding:20px 30px;
        border-bottom: solid 1px #e1d7e2;
    }
    .data-box{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .tips{
        background-color: #fff6d2;
        border-radius: 4px;
        border: solid 1px #ffe57d;
    }
    .name{
        border-radius: 4px;
        border: solid 1px #ddd;
    }
    .err{
        background:url('/statics/img/page-5.png') no-repeat;
        background-size:100%;
        border-radius: 4px;
        color:#fff;
        justify-content: center;
    }
    .img-box{
        width: 50px;
        text-align: center;
    }
    .form{
        padding: 0 30px;
    }
    .btn{
        width: 400px;
        height: 50px;
        background:#4768b2;
        color:#fff;
        font-size:26px;
        line-height: 50px;
        text-align: center;
        border-radius: 6px;
        margin-top:30px;
        cursor:pointer;
    }
</style>
<body>
<div class="main"  id="rrapp" >
    <div class="box">
        <div class="data-box">
            <div class="data">
                <div class="title">图文宝</div>
                <div class="form">
                    <div  v-if="!error" class="flex tips">
                        <div class="img-box">
                            <img src="/statics/img/page-1.png" alt="">
                        </div>
                        <div>公共场所不建议自动登录，以防账号丢失</div>
                    </div>
                    <!-- 密码错误提示 -->
                    <div  v-if="error" class="flex err">
                        <div class="img-box">
                            <img src="/statics/img/page-4.png" alt="">
                        </div>
                        <div class="err-bg">账号或密码不正确</div>
                    </div>
                    <div class="flex name">
                        <div class="img-box">
                            <img src="/statics/img/page-2.png" alt="">
                        </div>
                        <div>
                            <input type="text" style="width: 380px;"  v-model="username" placeholder="账号">
                            <!--<span class="glyphicon glyphicon-user form-control-feedback"></span>-->
                            <!--<input type="text"  placeholder="请输入账号">-->
                        </div>
                    </div>
                    <div class="flex name">
                        <div class="img-box">
                            <img src="/statics/img/page-3.png" alt="">
                        </div>
                        <div>
                            <input type="password" style="width: 380px;" v-model="password" @keyup.enter="login"  placeholder="密码">
                            <!--<input type="password"  placeholder="请输入密码">-->
                        </div>
                    </div>
                    <button class="btn"  @click="login">登录</button>
                </div>
            </div>
        </div>
        <div class="zs"></div>
    </div>
</div>
<script src="${request.contextPath}/statics/libs/jquery.min.js"></script>
<script src="${request.contextPath}/statics/libs/vue.min.js"></script>
<script src="${request.contextPath}/statics/libs/bootstrap.min.js"></script>
<script src="${request.contextPath}/statics/libs/jquery.slimscroll.min.js"></script>
<script src="${request.contextPath}/statics/libs/fastclick.min.js"></script>
<script src="${request.contextPath}/statics/libs/app.js"></script>
<script type="text/javascript">
    //获取参数方法
    (function ($) {
        $.getUrlParam = function (name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }
    })(jQuery);
    var vm = new Vue({
        el: '#rrapp',
        data: {
            username: '',
            password: '',
            captcha: '',
            error: false,
            errorMsg: '',
            src: 'captcha.jpg'
        },
        beforeCreate: function () {
            if (self != top) {
                top.location.href = self.location.href;
            }
        },
        mounted: function () {
            var kicout = $.getUrlParam("kicout");
            if(kicout == "1"){
                this.error = true;
                this.errorMsg="您已经在其他地方登录，请重新登录！";
            }
        },
        methods: {
            refreshCode: function () {
                this.src = "captcha.jpg?t=" + $.now();
            },
            login: function (event) {
                var data = "username=" + vm.username + "&password=" + vm.password + "&captcha=" + vm.captcha;
                $.ajax({
                    type: "POST",
                    url: "sys/login",
                    data: data,
                    dataType: "json",
                    success: function (result) {
                        if (result.code == 0) {//登录成功
                            parent.location.href = 'index.html';
                        } else {
                            vm.error = true;
                            vm.errorMsg = result.msg;

                            //vm.refreshCode();
                        }
                    }
                });
            }
        }
    });
</script>
</body>
</html>
